<!DOCTYPE>
<html>
<head>
    <title> new document </title>
    <meta name="generator" content="editplus" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />

    <style>
        .main{width:600px;padding: 0 auto;}
        .tabs{width:100%;}

        .tabs .left{
            width:9%;
            float:left;
            border:1px solid #ddd;
            line-height:32px;
        }
        .tabs .center{
            width:80%;
            float:left;
            border:1px solid #ddd;
            overflow:hidden;
            height:32px;
            line-height:32px;
        }
        .tabs .center .tab{
            width:12%;
            float:left;
            border:1px solid #ddd;
            display:inline-block;
            line-height:32px;

        }
        .tabs .center  .hide{
            display:none;
        }
        .tabs .right{
            width:10%;
            float:right;
            border:1px solid #ddd;
            line-height:32px;
        }


    </style>

    <script type="text/javascript" src="../scripts/jquery/1.10.2/jquery.js"></script>
    <script>

        $("document").ready(function(){
            $(".tabs").each(function(){
                var _this =$(this);
                $(this).find(".left").click(function(){
                    var tabs=$(".center>.hide");
                    if(tabs.length>0)
                    {
                        tabs.last().removeClass("hide");
                    }
                });
                $(this).find(".right").click(function(){
                    var center=_this.find(".center");
                    var tabs=center.children();
                    var first=null;
                    tabs.each(function(){
                        if($(this).attr("class").indexOf("hide")>0)
                        {
                            first=$(this);
                        }
                    })
                    if(first==null)
                    {
                        tabs.first().addClass("hide");;
                    }
                    else
                    {
                        first.next().addClass("hide");
                    }

                });
            })

        })
    </script>
</head>

<body>
<div class="main">
    <div class="tabs">
        <div class=" left "><<</div>
        <div class="center">
            <div class="tab">1</div>
            <div class="tab">2</div>
            <div class="tab">3</div>
            <div class="tab">4</div>
            <div class="tab">5</div>
            <div class="tab">6</div>
            <div class="tab">7</div>
            <div class="tab">8</div>
            <div class="tab">9</div>
            <div class="tab">10</div>
        </div>
        <div class=" right">>></div>
    </div>
</div>
</body>
</html>